<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>exercise</title>
</head>

<body>
        <div class="github">
                <a href="https://github.com/zhansingsong/svg-tutorials" class="github-corner"
                    aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
                        style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
                        aria-hidden="true">
                        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                        <path
                            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                            fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                        <path
                            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                            fill="currentColor" class="octo-body"></path>
                    </svg></a>
                <style>
                    .github-corner:hover .octo-arm {
                        animation: octocat-wave 560ms ease-in-out
                    }
    
                    @keyframes octocat-wave {
    
                        0%,
                        100% {
                            transform: rotate(0)
                        }
    
                        20%,
                        60% {
                            transform: rotate(-25deg)
                        }
    
                        40%,
                        80% {
                            transform: rotate(10deg)
                        }
                    }
    
                    @media (max-width:500px) {
                        .github-corner:hover .octo-arm {
                            animation: none
                        }
    
                        .github-corner .octo-arm {
                            animation: octocat-wave 560ms ease-in-out
                        }
                    }
                </style>
            </div>
    <style>
        .profile {
            position: relative;
            max-width: 600px;
            width: 100%;
            min-width: 320px;
            height: 600px;
            margin: 0 auto;
            transform: translate(0, 5%);
        }
        
        .wp {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: #f5f5f5;
            transition: opacity 1s ease-in;
        }
        
        .img {
            position: absolute;
            height: 304px;
            width: 304px;
            overflow: hidden;
            border-radius: 152px;
            transform: translate(168px, 54px);
        }
        
        .des {
            position: absolute;
            width: 400px;
            text-align: center;
            transform: translate(120px, 392px);
            font-size: 28px;
        }
    </style>
    <section class="profile">
        <svg id="rectangle" class="line-drawing hide" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
        <g fill="none" stroke-width="4" stroke="#aaa">
            <path d="M0 0L600 0L600 600L0 600L0 0Z" id="i0"/><path d="M470 206C470 288.79 402.79 356 320 356C237.21 356 170 288.79 170 206C170 123.21 237.21 56 320 56C402.79 56 470 123.21 470 206Z" id="i1"/><path d="M170 418L470 418L470 460.52L170 460.52L170 418Z" id="i2"/>
        </g>
      </svg>
        <div class="wp">
            <a href="https://github.com/zhansingsong" class="img">
                <img src="https://avatars2.githubusercontent.com/u/13599801?s=460&v=4" alt="" style="
          transform: translate(-25%, -10%);
      ">
            </a>
            <p class="des">进化中的“菜鸟”</p>
        </div>
    </section>
    <script>
        var current_frame, total_frames, path, length, handle, myobj;

        // myobj = document.getElementById('myobj').cloneNode(true);
        const wp = document.querySelector('.wp');
        var init = function() {
            current_frame = 0;
            total_frames = 60;
            path = new Array();
            length = new Array();
            for (var i = 0; i < 3; i++) {
                path[i] = document.getElementById('i' + i);
                l = path[i].getTotalLength();
                length[i] = l;
                path[i].style.strokeDasharray = l + ' ' + l;
                path[i].style.strokeDashoffset = l;
            }
            handle = 0;
        }

        var draw = function() {
            var progress = current_frame / total_frames;
            if (progress > 1) {
                wp.style.opacity = 1;
                window.cancelAnimationFrame(handle);
            } else {
                current_frame++;
                for (var j = 0; j < path.length; j++) {
                    path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
                }
                handle = window.requestAnimationFrame(draw);
            }
        };

        init();
        draw();

        // var rerun = function() {
        //   var old = document.getElementsByTagName('div')[0];
        //   old.parentNode.removeChild(old);
        //   document.getElementsByTagName('body')[0].appendChild(myobj);
        //   init();
        //   draw();
        // };
    </script>
</body>

</html>